<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>daterangepicker组件Demo</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="daterangepicker.css">

    <script src="jquery-2.2.3.min.js"></script>
    <script src="daterangepicker/moment.js"></script>
    <script src="daterangepicker/daterangepicker.js"></script>
    <script type="text/javascript">

        $(function () {
            //单个时间插件
            $("input[name='date1']").daterangepicker(
                {
                    singleDatePicker: true,//设置为单个的datepicker，而不是有区间的datepicker 默认false
                    showDropdowns: true,//当设置值为true的时候，允许年份和月份通过下拉框的形式选择 默认false
                    autoUpdateInput: false,//1.当设置为false的时候,不给与默认值(当前时间)2.选择时间时,失去鼠标焦点,不会给与默认值 默认true
                    timePicker24Hour : true,//设置小时为24小时制 默认false
                    timePicker : false,//可选中时分 默认false
                    locale: {
                        format: "YYYY-MM-DD",
                        separator: " - ",
                        daysOfWeek: ["日","一","二","三","四","五","六"],
                        monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
                    }

                }
            ).on('cancel.daterangepicker', function(ev, picker) {
                $("#date1").val("请选择日期");
                $("#submitDate").val("");
            }).on('apply.daterangepicker', function(ev, picker) {
                $("#submitDate").val(picker.startDate.format('YYYY-MM-DD'));
                $("#date1").val(picker.startDate.format('YYYY-MM-DD'));
            });

            //区间时间插件
            $("input[name='date2']").daterangepicker(
                {
                    // autoApply: true,
                    autoUpdateInput: false,
                    // alwaysShowCalendars: true,
                    ranges: {
                        '今天': [moment(),moment()],
                        '昨天': [moment().subtract(1, 'days'),moment().subtract(1, 'days')],
                        '近7天': [moment().subtract(7, 'days'), moment()],
                        '这个月': [moment().startOf('month'), moment().endOf('month')],
                        '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                    },
                    locale: {
                        format: "YYYY/MM/DD HH:MM:SS",
                        separator: " - ",
                        applyLabel: "确认",
                        cancelLabel: "清空",
                        fromLabel: "开始时间",
                        toLabel: "结束时间",
                        customRangeLabel: "自定义",
                        daysOfWeek: ["日","一","二","三","四","五","六"],
                        monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
                    }
                }
            ).on('cancel.daterangepicker', function(ev, picker) {
                $("#date2").val("请选择日期范围");
                $("#startTime").val("");
                $("#endTime").val("");
            }).on('apply.daterangepicker', function(ev, picker) {
                $("#startTime").val(picker.startDate.format('YYYY-MM-DD'));
                $("#endTime").val(picker.endDate.format('YYYY-MM-DD'));
                $("#date2").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD'));
            });
        });
    </script>
</head>
<body>
<div class="form-group">
    <label>单个</label>
    <div>
        <input type="text" name="date1" id="date1" class="form-control" style="width: 20%;">
        <input type="hidden" id = "submitDate" name="submitDate" class="form-control" />
    </div>
</div>
<br>
<div class="form-group">
    <label>区间</label>
    <div>
        <input type="text" name="date2" id="date2" class="form-control" style="width: 20%;">
        <input type="hidden" id = "startTime" name="startTime" class="form-control" />
        <input type="hidden" id = "endTime" name="endTime" class="form-control" />
    </div>
</div>
</body>
</html>
